<template>
  <ul class="context-menu-container">
    <li @click="onRefreshClick">
      {{ $t("msg.tagsView.refresh") }}
    </li>
    <li @click="onCloseRightClick">
      {{ $t("msg.tagsView.closeRight") }}
    </li>
    <li @click="onCloseOtherClick">
      {{ $t("msg.tagsView.closeOther") }}
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    index: {
      type: String,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 刷新
    onRefreshClick() {
      this.$router.go(0);
    },
    // 删除右边
    onCloseRightClick() {
      this.$store.commit("app/removeTagsView", {
        type: "right",
        index: Number(this.index),
      });
    },
    // 删除其他
    onCloseOtherClick() {
      this.$store.commit("app/removeTagsView", {
        type: "other",
        index: this.index,
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.context-menu-container {
  position: fixed;
  background: #fff;
  z-index: 3000;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    &:hover {
      background: #eee;
    }
  }
}
</style>
